<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>钟摆游戏</title>
	<style>
		* {
			box-sizing: border-box;
			margin: 0;
		}
		.game {
			position: relative;
			height: 500px;
			width: 500px;
		}
		.item {
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: cadetblue;
			border-radius: 100%;
			color: #fff;
			width: 85px;
			height: 85px;
			border: 1px solid rgb(55, 101, 103);
			position: absolute;
			left: 50%;
			top: 50%;
			margin: -40px 0 0 -40px;
		}
		.item-name {
			position: relative;
			z-index: 1;
		}
		.tool {
			animation: run 3s linear infinite;
		}
		@keyframes run {
			0% {
				transform:rotate(0deg);
			}
			100% {
				transform:rotate(360deg);
			}
		}
		.paused {
			animation-play-state: paused;
		}
		.tool,.tool-circle {
			position: absolute;
			width: 60px;
			height: 60px;
			left: 50%;
			top: 50%;
			margin: -30px 0 0 -30px;
			background-color: rgb(117, 68, 68);
			border-radius: 100%;
		}
		.tool:after {
			content: '';
			position: absolute;
			height: 100px;
			width: 10px;
			background-color: rgb(117, 68, 68);
			left: 50%;
			margin-left: -5px;
			bottom: 30px;
		}
		.tool-circle {
			top: -78px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.score {
			position: absolute;
			left: 250px;
			top: 250px;
			transform: translate(-50%, -50%);
		}
	</style>
</head>
<body>
	<div class="score">分数：<label id="val">0</label></div>
	<div class="game"></div>
</body>
<script>
	const game = document.querySelector('.game')
	const score = document.querySelector('#val')
	const max = 9
	let index = 0
	const data = Array.from(new Array(max)).map((v, i) => {
		const deg = i * 360 / max
		return `<div class="item" style="transform: rotate(${deg}deg) translate(160px);z-index:${i === index ? '10': ''}">
				<span class="item-name" style="transform: rotate(-${deg}deg)"></span>
				${i === 0 ? `<div class="tool" >
					<div class="tool-circle"><span id="curr"></span></div>
				</div>` : ''}
		</div>`
	})
	game.innerHTML = data.join('')
	// document.elementFromPoint(300, 10).click()
	document.onclick = () => {
		const tool = game.querySelector(`.tool`)
		tool.classList.add('paused')
		const nextIndex = index === 8 ? 0 : index + 1
		const list = game.children
		const currRect = document.getElementById('curr').getBoundingClientRect()
		const moveEL = list[nextIndex].querySelector('.item-name')
		const moveRect = moveEL.getBoundingClientRect()
		if (Math.abs(currRect.left - moveRect.left) < 12.5 && Math.abs(currRect.top - moveRect.top) < 12.5) {
			list[nextIndex].appendChild(tool)
			tool.classList.remove('paused')
			list[index].style.zIndex = ''
			list[nextIndex].style.zIndex = '10'
			if (index === 8) {
				index = 0
			} else {
				index ++ 
			}
			score.innerHTML = parseInt(score.innerHTML) + 1
		} else if (score.innerHTML.indexOf('，') === -1) {
			score.innerHTML += '，游戏结束'
		}
	}
</script>
</html>